<template>
    <view class="nav-box" :style="{'height':height+'px','background':bgColor}">
        <view :class="[fixed?'fixed':'']" :style="{'background':bgColor}">
            <!-- 状态栏占位 -->
            <view class="status_bar" :style="{'height':statusBarHeight+'px',zIndex:'999'}"></view>
            <!-- 导航内容 -->
            <view class="nav-main" :style="{'height': navBarHeight+'px'}">
                <view class="nav" v-if="isSlot">
                    <slot></slot>
                </view>
				
				<view class="nav nav-center" v-else>
					<slot name="leftIcon">
						<image v-if="isBack&&!homeIcon" class="icon-back" @click="navBack" :src="$img_path('/course/49.png')" mode="heightFix"></image>
						<image v-if="isBack&&homeIcon" class="icon-back" @click="toIndex" :src="$img_path('/course/home.png')" mode="heightFix"></image>
					</slot>
					<view class="title" :style="{textAlign: titleTextAlign,color:color}">{{title}}</view>
					
					<view class="r-box" v-if="isRight">
						<slot name="r_slot"></slot>
					</view>
				</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        //接收父组件传值(仅示例，其他业务场景可自行扩展)
        props: {
			color:{
				type: String,
				default: "#333333"
			},
            // 导航栏背景色相关
            bgColor: {
                type: String,
                default: "#FFFFFF"
            },
            // 标题相关
            title: {
                type: String,
                default: "首页"
            },
			titleTextAlign:{
                type: String,
                default: "center"
			},
            // 特定路径
            path: {
                type: String,
            },
			// #ifndef MP-WEIXIN
			// 导航栏高度（不包含状态栏）
			navBarHeight: {
			    type: Number,
			    default: 44
			},
			// #endif
            wxnavBarHeight:{
				type: Number,
				default: null
			},
            fixed: {
                type: Boolean,
                default: true
            },
			isSlot:{
				type:Boolean,
				default: false
			},
			isBack:{
				type:Boolean,
				default: true
			},
			homeIcon:{
				type:Boolean,
				default: false
			},
			
			isBackFun:{
				type:Boolean,
				default: false
			},
			
			isRight:{
				type:Boolean,
				default: false
			},
        },
        watch: {
            fixed(newVal, oldVal) {
                this.fixed = newVal
            }
        },
        data() {
            return {
                // 自定义导航栏高度总和
                height: 60,
                // 微信小程序胶囊布局位置信息
                menuButtonRect: {},
                // 状态栏高度
                statusBarHeight: 0,
				// #ifdef MP-WEIXIN
				// 导航内容高度（不包含状态栏）
				navBarHeight:40
				// #endif
				
            }
        },
        mounted() {
            this.getHeight();
        },
        methods: {
			navBack(){
				if(this.isBackFun){
					this.$emit('navigateBack')
				}else{
					uni.navigateBack()
				}
			},
			toIndex(){
				uni.redirectTo({
					url:'/pagesCourse/index/index'
				})
			},
			
            //计算导航栏总高度
            getHeight() {
                // #ifdef APP-PLUS || H5 || APP
                // 获取状态栏高度(电量时间通知等信息-单位px)
                let sysInfo = uni.getSystemInfoSync();
                this.statusBarHeight = sysInfo.statusBarHeight;
				// this.navBarHeight = 44
                this.height = this.statusBarHeight + this.navBarHeight;
				// this.$nextTick(()=>{
				// 	this.height = this.navBarHeight
				// })
				
                // #endif

                // 判断获取微信小程序胶囊API是否可用
                if (uni.canIUse('getMenuButtonBoundingClientRect')) {
                    // 获取微信小程序胶囊布局位置信息
                    // #ifndef H5 || APP-PLUS || APP
                    let sysInfo = uni.getSystemInfoSync();
                    let rect = uni.getMenuButtonBoundingClientRect()
                    this.menuButtonRect = JSON.parse(JSON.stringify(rect));
                    // (胶囊上部高度-状态栏高度)*2 + 胶囊高度 = 导航栏高度（不包含状态栏）
                    //以此保证胶囊位于中间位置，多机型适配
					this.$nextTick(()=>{
						this.navBarHeight =  this.wxnavBarHeight==null ? (rect.top - sysInfo.statusBarHeight) * 2 + rect.height  : this.wxnavBarHeight;
						this.statusBarHeight = sysInfo.statusBarHeight;
						// 状态栏高度 + 导航栏高度 = 自定义导航栏高度总和
						this.height = sysInfo.statusBarHeight + this.navBarHeight;
					})
                    // #endif
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .nav-box {
        position: relative;
        width: 100%;

        .nav-main {
            display: flex;
            // padding: 0 25upx;

            .nav {
                display: flex;
                align-items: center;
                width: 100%;
                z-index: 5;
            }
        }
    }

    .fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        // background-color: rgba(255, 255, 255,1);
        z-index: 98;
    }
	
	.nav-center{
		position: relative;
		.icon-back{
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			left: 12rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		.title{
			width: 80%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin: 0 auto;
		}
		
		.r-box{
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>